<template>
	<div class="evidence-unit-evidence-container" style="display: flex; flex-direction: column; height: calc(100vh - 220px)">
		<el-form ref="refSeach" :inline="true" :model="formInline" size="mini">
			<el-form-item label-width="100px" label="案件编号" prop="caseNo">
				<el-input v-model="formInline.caseNo" placeholder="请输入..."></el-input>
			</el-form-item>
			<el-form-item label-width="100px" label="关联编号" prop="inspectionNo">
				<el-input v-model="formInline.inspectionNo" placeholder="请输入..."></el-input>
			</el-form-item>
			<el-form-item label-width="100px" label="案件名称" prop="caseName">
				<el-input v-model="formInline.caseName" placeholder="请输入..."></el-input>
			</el-form-item>
			<el-form-item label-width="100px" label="案发时间" prop="caseTime">
				<el-date-picker
					v-model="formInline.caseTime"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					type="daterange"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					style="width: 220px"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label-width="100px" label="物品编号" prop="evidenceNo">
				<el-input v-model="formInline.evidenceNo" placeholder="请输入..."></el-input>
			</el-form-item>
			<el-form-item label-width="100px" label="物品名称" prop="evidenceName">
				<el-input v-model="formInline.evidenceName" placeholder="请输入..."></el-input>
			</el-form-item>
			<el-form-item label-width="100px" label="物品状态" prop="evidenceStatus">
				<el-select v-model="formInline.evidenceStatus" placeholder="请选择...">
					<el-option label="请选择" :value="-1"></el-option>
					<el-option label="登记" :value="0"></el-option>
					<el-option label="入库" :value="1"></el-option>
					<el-option label="出库" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<!--	<el-form-item label-width="100px" label="制作人" prop="personName">
				<el-input v-model="formInline.personName" placeholder="请输入..."></el-input>
			</el-form-item>-->
			<el-form-item label-width="100px" label="获取时间" prop="caseTime">
				<el-date-picker
					v-model="formInline.extractionDateTime"
					type="daterange"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					style="width: 220px"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label-width="100px" label="登记时间" prop="caseTime">
				<el-date-picker
					v-model="formInline.createDateTime"
					type="daterange"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					style="width: 220px"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item style="margin-left: 20px">
				<el-button type="primary" @click="onSearch" icon="el-icon-search" size="small">查询</el-button>
				<el-button type="primary" @click="onRest" icon="el-icon-view" size="small">重置</el-button>
			</el-form-item>
		</el-form>
		<div style="flex: 1; height: 0">
			<el-table
				ref="multipleTable"
				:data="tableData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				:row-style="{ height: '0' }"
				:cell-style="{ padding: '0' }"
				size="medium"
				height="calc(100% - 50px)"
				style="width: 100%"
				highlight-current-row
				:row-class-name="tableRowClassName"
				@row-dblclick="rowDblclick"
				@selection-change="handleSelectionChange"
			>
				<el-table-column align="center" type="selection" width="55" />
				<el-table-column align="center" label="序号" type="index" width="60"> </el-table-column>
				<el-table-column align="center" property="caseNo" width="180" sortable label="案件编号" show-overflow-tooltip />
				<el-table-column align="center" property="inspectionNo" width="180" sortable label="关联编号" show-overflow-tooltip />
				<el-table-column align="center" property="caseName" sortable label="案件名称" show-overflow-tooltip />
				<el-table-column align="center" property="evidenceNo" width="180" sortable label="物品编号" show-overflow-tooltip />
				<el-table-column align="center" property="casePerson" sortable label="物品名称/数量" show-overflow-tooltip>
					<template #default="scope">{{ `${scope.row.evidenceName}/${scope.row.evidenceQuantity}` }}</template>
				</el-table-column>
				<!--
				<el-table-column v-show="false" align="center" property="caseOrg" sortable label="物品类别" show-overflow-tooltip>
					<template #default="scope">{{ `${scope.row.evidenceClassName}/${scope.row.evidenceCategoryName}` }}</template>
				</el-table-column> -->
				<el-table-column align="center" property="evidencePerson" label="颜色/获取时间" show-overflow-tooltip>
					<template #default="scope">{{ `${scope.row.extractionPersonName}/${dateFormat(scope.row.extractionDateTime)}` }}</template>
				</el-table-column>
				<el-table-column align="center" property="location" sortable label="存放位置" show-overflow-tooltip />
				<el-table-column align="center" property="status" sortable label="状态" show-overflow-tooltip>
					<template #default="scope">{{ getEvidenceStatus(scope.row.status) }}</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="150px">
					<template #default="scope">
						<el-button type="primary" @click="onConfirmChoice(scope.row)" plain size="mini">选择</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:page-sizes="[10, 20, 50, 100]"
				:page-size="formInline.pageSize"
				layout="prev, pager, next, jumper,total,sizes"
				:total="total"
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				prev-text="上一页"
				next-text="下一页"
				background
			>
			</el-pagination>
		</div>
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { queryPagerCaseEvidences } from '/@/api/evidence/index';
import { dateFormat } from '/@/common/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getEvidenceStatus } from '/@/common/index';

export default defineComponent({
	props: {
		caseid: String,
	},
	name: 'choiceEvience',
	setup(props: any, context: any) {
		const state = reactive({
			formInline: {
				caseId: props.caseid || 0,
				caseNo: '',
				inspectionNo: '',
				caseName: '',
				caseTime: '',
				evidenceNo: '',
				evidenceName: '',
				evidenceStatus: -1,
				personName: '',
				extractionDateTime: '',
				caseTimeStart: '',
				caseTimeEnd: '',
				extractionDateTimeStart: '',
				extractionDateTimeEnd: '',
				createDateTime: '',
				createStartDateTime: '',
				createEndDateTime: '',
				page: 1,
				pageSize: 10,
			},
			tableData: [],
			total: 0,
			checkRecords: [],
		});
		const onConfirmChoice = (row: any) => {
			context.emit('saveMath', row.evidenceId);
		};
		function init() {
			state.formInline.caseTimeStart = '';
			state.formInline.caseTimeEnd = '';
			state.formInline.extractionDateTimeStart = '';
			state.formInline.extractionDateTimeEnd = '';
			state.formInline.createStartDateTime = '';
			state.formInline.createEndDateTime = '';
			if (state.formInline.caseTime && state.formInline.caseTime.length > 1) {
				state.formInline.caseTimeStart = state.formInline.caseTime[0];
				state.formInline.caseTimeEnd = state.formInline.caseTime[1];
			}
			if (state.formInline.extractionDateTime && state.formInline.extractionDateTime.length > 1) {
				state.formInline.extractionDateTimeStart = state.formInline.extractionDateTime[0];
				state.formInline.extractionDateTimeEnd = state.formInline.extractionDateTime[1];
			}
			if (state.formInline.createDateTime && state.formInline.createDateTime.length > 1) {
				state.formInline.createStartDateTime = state.formInline.createDateTime[0];
				state.formInline.createEndDateTime = state.formInline.createDateTime[1];
			}
			queryPagerCaseEvidences(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}
		const refSeach = ref();
		function onSearch() {
			init();
		}
		function onRest() {
			refSeach.value.resetFields();
		}
		function handleSelectionChange(value: any) {
			state.checkRecords = value;
		}
		function onHandleSizeChange(pageSize: number) {
			state.formInline.pageSize = pageSize;
			init();
		}
		function onHandleCurrentChange(pageIndex: any) {
			state.formInline.page = pageIndex;
			init();
		}
		init();
		return {
			onConfirmChoice,
			onSearch,
			refSeach,
			onRest,
			dateFormat,
			handleSelectionChange,
			onHandleSizeChange,
			getEvidenceStatus,
			onHandleCurrentChange,
			...toRefs(state),
		};
	},
});
</script>
<style scoped>
.el-input,
.el-select,
.el-date-picker {
	width: 220px;
}
</style>
